<template>
  <Drawer ref="drawer"/>
  <view class="index">
    <view class="whole">
      <view class="index-header">
        <uni-icons class="bar" type="bars" size="24" @click="ctKai"></uni-icons>
        <view class="search" @click="goSearch">
          <uni-icons type="search" size="22"></uni-icons>
          搜索
        </view>
      </view>
      <view v-for="item in wholeData" :key="item.blockCode">
        <banners v-if="item.blockCode === 'HOMEPAGE_BANNER'" :bannerData="item.extInfo?.banners" />
        <line2 v-else-if="item.blockCode === 'HOMEPAGE_BLOCK_OLD_DRAGON_BALL'" :horizontalData="item.creatives[0].resources"/>
        <recommandSongList v-else-if="item.blockCode === 'HOMEPAGE_BLOCK_PLAYLIST_RCMD'" :title="item.uiElement?.subTitle.title" :recommandData="item.creatives"/>
        <guessYouLike v-else-if="item.blockCode === 'HOMEPAGE_BLOCK_STYLE_RCMD'" :title="item.uiElement?.subTitle.title" :guessData="item.creatives" />
        <raderPlaylist v-else-if="item.blockCode === 'HOMEPAGE_BLOCK_MGC_PLAYLIST'" :title="item.uiElement?.subTitle.title" :raderData="item.creatives"/>
      </view>
    </view>
    <view class="mini">
      <miniPlayer v-if="music.song"/>
    </view>
  </view>
</template>

<script setup lang="ts">
import Drawer from '../drawer/drawer.vue'

import banners from './components/banners.vue'
import line2 from './components/line2.vue'
import recommandSongList from './components/recommandSongList.vue'
import guessYouLike from './components/guessYouLike.vue'
import raderPlaylist from './components/raderPlaylist.vue'
import miniPlayer from '../components/miniPlayer.vue'
import { useMusicStore } from '../../store/listMusic'
import { indexApi } from '@/services/index'
import type { BlocksItemType } from '@/services/type'
const wholeData = ref<BlocksItemType[]>([])
useMusicStore().getUserStatus()
// 抽屉
const drawer = ref()
const ctKai = () => {
  if(drawer.value) {
    drawer.value.open()
  }
}

indexApi().then((res)=>{
  wholeData.value = res.data.blocks
  console.log(wholeData.value)
})

import { nextTick, ref, watch } from 'vue'

setTimeout(() => {
  console.log(document.cookie)
},20000)
const music = useMusicStore()
// 跳搜索页面
const goSearch = () => {
  uni.navigateTo({
    url: '/pages/search/search'
  })
}

// import { useMusicStore } from '@/store/listMusic'
// import { LoginStateApi, UserDetailApi } from '@/services/index'
// const userId = ref<number>(0)
// const userName = ref<string>('')
// const userImage = ref<string>('')
// LoginStateApi().then((res)=>{
//   userId.value = res.account.id
// })
// UserDetailApi(userId.value as number).then((res)=>{
//   userName.value = res.nickname
//   userImage.value = res.avatarUrl
// })
// const login = async () => {
//   try{
//     const res1 = await LoginStateApi();
//       userId.value = res1.account.id;

//       const res2 = await UserDetailApi(userId.value as number);
//       userName.value = res2.nickname;
//       userImage.value = res2.avatarUrl;
//   }catch(e){
//   console.log(e)
//   }
// }

// console.log(userId.value)
// console.log(userName.value)
// console.log(userImage.value)

// interface drawerInfoType {
//   userName: string
//   userId: number
//   userImage: string
// }
// const drawerInfo = ref<drawerInfoType>({
//   userName:userName.value,
//   userId: userId.value,
//   userImage: userImage.value
// })

</script>

<style lang="scss" scoped>
.index {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.whole{
  flex: 1;
  overflow: scroll;
}
.mini{
  flex-shrink: 0;
  padding-bottom: 100rpx;
}
.index-header{
  height: 80rpx;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  .bar{
    width:60rpx;
  }
  .search{
    flex: 1;
    text-align: center;
    color: #888787;
    background-color: #eeeeee;
    border-radius: 20rpx;
    height: 60rpx;
    line-height: 60rpx;
  }
}
</style>
